<template>
    <div class="gallery-item">
        <yk-space size="xl">
            <!-- 800 X 600 -->
            <div class="gallery-item_cover">
                <yk-image :src="`${baseImgPath}/${props.articleData?.cover}`" width="160" height="120" :is-lazy="true"
                    :preview="false" fit="cover" />
                <p class="gallery-item_unpublish" v-if="props.articleData?.state === 0">未发布</p>
            </div>
            <div style="width: 100%;">
                <p class="gallery-item_title" v-html="title"></p>
                <p class="gallery-item_introduce"  v-html="introduce"></p>
                <div class="gallery-item_footerUtility">
                    <yk-space size="xl">
                        <yk-text type="secondary">
                            {{ subsetStore.subsetName(props.articleData?.subset_id) }}
                            /
                            <yk-tag v-if="props.articleData!.label!.length > 0" v-for="item in props.articleData.label"
                                :key="item" size="l" style=" margin:0 5px;">{{ item }}
                            </yk-tag>
                            <yk-text type="secondary" style="margin:0 12px;">{{ getTimeYMD(props.articleData.created_at)
                            }}</yk-text>
                            <yk-text type="third">
                                <IconEyeOutline />
                                {{ props.articleData.views }}
                            </yk-text>
                            <yk-text type="third" style="margin:0 12px;">
                                <IconLikeOutline />
                                {{ props.articleData.views }}
                            </yk-text>
                            <yk-text type="third">
                                <IconCommentOutline />
                                {{ props.articleData.views }}
                            </yk-text>

                        </yk-text>
                    </yk-space>
                    <yk-space size="xl" class="gallery-item_footerUtility_right">
                        <yk-tooltip placement="top" title="发布" v-if="props.articleData?.state === 0">
                            <IconSendOutline @click="changeState(1)" />
                        </yk-tooltip>
                        <yk-tooltip placement="top" title="撤回" v-else>
                            <IconRevokeOutline @click="changeState(0)" />
                        </yk-tooltip>
                        <yk-tooltip placement="top" title="编辑">
                            <IconFillOutline @click="updateArticle" />
                        </yk-tooltip>
                        <yk-popconfirm trigger="click" title="删除" content="删除将不可恢复" @cancel="cancel"
                            @confirm="deleteArticle()">
                            <IconDeleteOutline />
                        </yk-popconfirm>
                    </yk-space>
                </div>
            </div>

        </yk-space>
    </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, ref, watch,onMounted } from 'vue';
import type { articleData } from '../../utils/interface';
import { useSubsetStore } from '../../stores/subset'; // 导入 store
import { getTimeYMD } from '../../utils/time'; // 导入格式化时间的函数
import { baseImgPath } from '../../utils/env'; // 导入图片路径
import { useRouter } from 'vue-router';
import { highlightKeyword } from '../../utils/searchHighlight';
const router = useRouter() //获取路由实例
const proxy: any = getCurrentInstance()?.proxy
function cancel() {
    proxy.$message({ type: 'warning', message: '你点击了取消按钮' })
}
const subsetStore = useSubsetStore(); // 获取 store 实例


const emits = defineEmits(['delete', 'state'])

type ArticleItemProps = {
    articleData: articleData; // 文章数据
    searchTerm?: string;
}
const props = withDefaults(defineProps<ArticleItemProps>(), {
    articleData: () => ({
        id: 0,
        title: '',
        created_at: new Date(),
        views: 0,
        comment: 0,
        praise: 0,
        state: 0
    }), // 文章数据默认值
    searchTerm: ''
})

// 删除文章
const deleteArticle = () => {
    emits('delete', props.articleData!.id)
    // 在这里实现删除文章的逻辑，例如调用 API 或更新状态
}

//发布状态为1，未发布状态为0
// 更改文章状态
const changeState = (e: number) => {
    emits('state', { id: props.articleData!.id, state: e })
}

//跳转到修改文章页面
const updateArticle = () => {
    router.push({
        path: '/editarticle',
        query: { id: props.articleData!.id }
    })
}

// 高亮关键词
const title = ref('')
const introduce = ref('')
const highlightText = (key?: string) => {
    if (props.articleData?.introduce) {
        introduce.value = highlightKeyword(props.articleData?.introduce, key);
    }
    title.value = highlightKeyword(props.articleData?.title, key);
};

watch(()=>props.searchTerm,()=>{
    highlightText(props.searchTerm);
})
onMounted(()=>{
    highlightText(props.searchTerm);
})

</script>
<style scoped lang="less">
.gallery-item {
    border-radius: @radius-m;
    background-color: @bg-color-l;
    padding: @space-xl;
    width: 100%;

    &_cover {
        position: relative;
        border-radius: @radius-m ;
        width: 160px;
        flex: none;
        overflow: hidden;
    }

    &_unpublish {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        line-height: 30px;
        font-weight: 500;
        background: rgba(43, 90, 237, 0.8);
        color: @white;
    }

    &_title {
        font-size: 20px;
        font-weight: 600;
        padding-bottom: @space-s;
    }

    &_introduce {
        .font-m();
        height: 48px;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2; // 控制显示的行数，标准属性，用于提高兼容性
        -webkit-box-orient: vertical; // 垂直方向
        text-overflow: ellipsis; // 超出部分显示省略号
        color: @font-color-l;
        margin-bottom: @space-m;
    }

    &_footerUtility {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_right {
            .yk-icon {
                width: 20px;
                height: 20px;
                color: @font-color-s;
                cursor: pointer;

                &:hover {
                    color: @pcolor;
                }
            }
        }
    }
}
</style>